import React, {useState} from 'react';
import styles from './labelSelect.module.scss'
import Man from '../img/man.png'
import Woman from '../img/woman.png'
import Novel from '../img/novel.png'
import Reading from '../img/reading.png'
import {CheckCircleFill} from "antd-mobile-icons";
import {useNavigate} from "react-router-dom";
const Index = () => {
    const [sex, setSex] = useState(null);
    const [types, setTypes] = useState(null)
    const navigate = useNavigate()


    return (
        <div className={styles.wrapper}>
            <div className = {styles.top} onClick={()=>navigate('/home')}>跳过</div>
            <div className = {styles.content}>

                <div className = {styles.itemSex}>
                    <div className = {styles.itemSexTitle}>请选择你的性别</div>
                    <div className = {styles.itemSexTitleTip}>我们将为你的选择推荐适合的内容</div>
                    <div className = {styles.itemSelect}>
                        <div className = {styles.man} onClick={()=>setSex('男生')}>
                            <img src={Man} alt=""/>
                            <div className = {styles.text}>男生</div>
                            {
                                sex && sex === '男生'?(
                                    <div className = {styles.active}><CheckCircleFill /></div>
                                ):null
                            }
                        </div>
                        <div className = {styles.woman} onClick={()=>setSex('女生')}>
                            <img src={Woman} alt=""/>
                            <div className = {styles.text}>女生</div>
                            {
                                sex && sex === '女生'?(
                                    <div className = {styles.active}><CheckCircleFill /></div>
                                ):null
                            }
                        </div>
                    </div>
                </div>

                <div className = {styles.itemTypes}>
                    <div className = {styles.itemSexTitle}>请选择你的感兴趣的类型</div>
                    <div className = {styles.itemSelect}>
                        <div className = {styles.man} onClick={()=>setTypes('小说')}>
                            <img src={Novel} alt=""/>
                            <div className = {styles.text}>小说</div>
                            {
                                types && types === '小说'?(
                                    <div className = {styles.active}><CheckCircleFill /></div>
                                ):null
                            }

                        </div>
                        <div className = {styles.woman} onClick={()=>setTypes('读物')}>
                            <img src={Reading} alt=""/>
                            <div className = {styles.text}>读物</div>
                            {
                                types && types === '读物'?(
                                    <div className = {styles.active}><CheckCircleFill /></div>
                                ):null
                            }
                        </div>
                    </div>
                </div>
            </div>
            <div className = {styles.footer}>
                <div onClick={()=>navigate('/home')} className = {`${styles.btn} ${sex || types ? styles.fActive:''}`}>
                    开启阅读时刻
                </div>
            </div>
        </div>
    );
};

export default Index;
